<!--
 * @Author: zywu 1061096367@qq.com
 * @Date: 2022-05-12 13:44:11
 * @LastEditors: zywu
 * @LastEditTime: 2022-08-23 14:38:49
 * @Description: 
-->
<template>
  <div class="device-scan-tip e-pt-51">
    <van-nav-bar title="扫码提示" fixed left-arrow @click-left="onClickLeft" />
    <div class="e-p-20 e-pl-30 e-pr-30">
      <div v-if="typeObj.id!=0">
        <van-image v-if="img" width="100%" :src="img" />
      </div>
      <div v-else class="e-color-999 e-flex-column e-flex-center e-flex-items-center" style="height:calc(100vh - 200px);">
        <div>请找到设备编码/IMEI码扫码</div>
        <div>也可以直接点击下一步手动输入</div>
      </div>
    </div>
    <div style="height:70px;"></div>
    <div class="e-fixed-b e-bg-white e-flex-y-center e-flex-between e-p-20">
      <van-checkbox class="e-color-999" v-model="checked" shape="square">我知道了，以后不再提示</van-checkbox>
      <div class="e-color-theme e-decoration" @click="next()">下一步</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},

  props: {
    typeObj: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },

  data() {
    return {
      checked: false,
    }
  },

  computed: {
    img() {
      if (!this.typeObj.id) return ''
      return `/ilink-app-h5-zd/static/addDevice/image/${this.typeObj.pid}-${this.typeObj.id}-tip.png`
    },
  },

  created() {},

  mounted() {},

  methods: {
    next() {
      localStorage.setItem(
        `ilink_addDeviceScanTip_${this.typeObj.pid}_${this.typeObj.id}`,
        this.checked ? '1' : ''
      )
      this.$native.scanQrCode()
      this.checked = false
    },
    onClickLeft() {
      this.$emit('close')
    },
  },
}
</script>
<style lang='scss'>
.device-scan-tip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: #fff;
  overflow-y: auto;
  .van-checkbox__label {
    color: #999;
  }
}
</style>